<template>
	<view>
		<uni-popup ref="carpsw" type="center" zindex :isShow="props.isShow" :is-mask-click="false"
			@maskClick="maskClick('cancel')">
			<!-- 开通套餐 -->
			<view v-if="props.type == 'creatMeal'" class="payPw crmeal">
				<view class="cu-bar-pwscon justify-between ctitle">
					<view class="modalTitle">
						{{props.title}}
						<!-- <view class="action" @tap="clickClose"><text class="cuIcon-close text-gray"></text></view> -->
					</view>
				</view>
				<view class="text-c9 text-center">请输入六位数电子卡密码</view>
				<view class="code">
					<view class="code-box flex" @tap="focus">
						<input class="passwordInput" type="number" :focus="isFocus" v-model="password"
							@input="passwordInput" @blur="isFocus=false" />
						<view class="code-box-item">{{ (password[0] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[1] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[2] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[3] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[4] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[5] && '✱') || '' }}</view>
					</view>
				</view>
				<view class="text-end">
					<view class="d_ib padding-lr-xl padding-tb-sm text-c9 text-sm"
						@click="mnavTo('/pages/user/passwordReset/passwordReset?phone=' + props.phone)">
						忘记密码?
					</view>
				</view>
				<view class="text-center">
					<view class="pwcancel text-c9 text-acenter text-df" @click="clickClose">
						取&nbsp;&nbsp;消
					</view>
				</view>
			</view>
			<!-- 电子卡 -->
			<view v-else class="payPw">
				<view class="cu-bar-pwscon justify-between ctitle">
					<view class="modalTitle">
						{{props.title}}
						<view class="action" @click="clickClose"><text class="cuIcon-close text-gray"></text></view>
					</view>
				</view>
				<!-- <view class="line"></view> -->
				<view class="money" v-if="props.type !== 'creatMeal'">
					￥
					<text
						class="bigMoney">{{ payActivityData.activityPrice? payActivityData.activityPrice:totalPayMoney }}</text>
					<text v-if="payActivityData.backMoney" class="info">(已减{{payActivityData.backMoney}}元)</text>
				</view>
				<view class="noti" v-if="props.type !== 'creatMeal'">支付金额</view>
				<view class="code">
					<view class="code-box flex" @tap="focus">
						<input class="passwordInput" type="number" :focus="isFocus" v-model="password"
							@input="passwordInput" @blur="isFocus=false" />
						<view class="code-box-item">{{ (password[0] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[1] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[2] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[3] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[4] && '✱') || '' }}</view>
						<view class="code-box-item">{{ (password[5] && '✱') || '' }}</view>
					</view>
				</view>
				<!-- <view class="dis text-center" v-if="props.type !== 'creatMeal'">请输入6位数密码</view> -->
				<view class="forget-pwd flex justify-end "
					@click="mnavTo('/pages/user/passwordReset/passwordReset?phone=' + props.phone)">忘记密码?</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { mnavTo } from '@/utils/helper';
	// import { onLoad } from '@dcloudio/uni-app';
	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false,
		},
		isBack: {
			type: Boolean,
			default: false,
		},
		phone: {
			type: String,
			default: '',
		},
		title: {
			type: String,
			default: '请输入电子卡支付密码',
		},
		type: {
			type: String,
			default: '',
		}
		// totalPayMoney:{
		// 	type: String||Number,
		// 	default:0
		// }

	});

	const emit = defineEmits(["maskClick", "confirm", 'closeBtn'])

	const isFocus = ref(false)
	const carpsw = ref(null)
	const password = ref('')
	const payActivityData = ref<any>({})//支付活动
	const focus = () => {
		isFocus.value = !isFocus.value;
	}
	const passwordInput = (e) => {
		// isFocus.value = !isFocus.value;
		uni.vibrateShort();
		password.value = e.detail.value;
		if (password.value.length == 6) {
			isFocus.value = false;
			close();
			emit("confirm", password.value)
		}
	}
	const initData = () => {
		isFocus.value = true;
		password.value = ''
	}
	const totalPayMoney = ref(0);
	const open = (param : any = {}) => {
		initData()
		if (props.type !== 'creatMeal') {
			totalPayMoney.value = param.totalPayMoney || 0;
		}
		console.log('opencarpsw+++',carpsw.value)
		carpsw.value.open();
	}

	const maskClick = (source : any = '') => {
		// console.log('car-maskClick',e);
		emit("maskClick", source)
	}
	const close = () => {
		carpsw.value.close();
		props.isBack && maskClick();
	}
	const clickClose = () => {
		carpsw.value.close();
		props.isBack && maskClick('cancel');
		emit("closeBtn")
	}
	defineExpose({ open, close, initData })
</script>

<style lang="scss" scoped>
	//输入密码弹窗
	.payPw {
		background: #fff;
		margin-top: -210rpx;
		// top: -110rpx;
		width: 680rpx;
		border-radius: 20rpx;

		&.crmeal {
			padding-bottom: 30rpx;

			.cu-bar-pwscon {
				padding: 40rpx 0 30rpx 0;
			}
		}

		.forget-pwd {
			color: #999;
			font-size: 24rpx;
			font-weight: 400;
			padding: 20rpx 50rpx 80rpx 0;
		}

		.cu-bar-pwscon {
			position: relative;
			padding: 66rpx 0 36rpx;
		}

		.money {
			color: #2d2d2d;
			font-size: 44rpx;
			font-family: HiraginoSansGB-W3;
			text-align: center;
			// margin-top: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bigMoney {
			font-size: 80rpx;
			font-weight: 700;
		}

		.noti {
			color: #606060;
			font-size: 28rpx;
			font-family: HiraginoSansGB-W3;
			text-align: center;
			line-height: 102rpx;
			margin: -20rpx auto 0;
			border-bottom: 1rpx solid #ededee;
			width: 570rpx;
		}

		.info {
			color: #999999;
			font-size: 20rpx;
			font-family: HiraginoSansGB-W3;
			// text-align: center;
			margin-left: 5rpx;
		}

		.action {
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);

			.cuIcon-close {
				font-size: 40rpx;
			}
		}

		.modalTitle {
			color: #333;
			font-size: 40rpx;
			font-weight: 400;
			text-align: center;
			position: relative;
		}

		.line {
			height: 1rpx;
			background-color: #2cad8d;
			width: 100%;
		}

		.code {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 30rpx 0 20rpx 0;
		}

		.code-box {
			justify-content: center;
			align-items: center;
			border: 1px solid #d0d0d0;
		}

		.code-box-item {
			width: 96rpx;
			height: 96rpx;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
		}

		.code-box-item:not(:last-child) {
			border-right: 1px solid #DFDFE1;
		}

		.passwordInput {
			position: absolute;
			width: 0;
			height: 0;
		}

		.dis {
			padding-bottom: 40rpx;
			font-size: 28rpx;
			color: #999;
		}
	}

	.ctitle {
		border-radius: 10rpx 10rpx 0 0;
	}

	.pwcancel {
		width: 300rpx;
		height: 80rpx;
		border-radius: 80rpx;
		border: 1px solid #BDBDBD;
	}
</style>